<!--
 * @Author: 赵克强 huohuo625@163.com
 * @Date: 2023-10-23 13:36:46
 * @LastEditors: 赵克强 huohuo625@163.com
 * @LastEditTime: 2024-08-13 11:14:47
 * @FilePath: \hy-ui\src\views\app\appInfo\components\detail\formModel\electronicForms\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--
 * @Author: 赵克强 huohuo625@163.com
 * @Date: 2023-10-23 13:36:46
 * @LastEditors: 赵克强 huohuo625@163.com
 * @LastEditTime: 2023-10-24 17:05:56
 * @FilePath: \hy-ui\src\views\app\appInfo\components\detail\formModel\electronicForms\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="electronicForms">
    <div class="topBtn">
      <div style="display: flex">
        <el-button
          type="primary"
          icon="el-icon-plus"
          style="background: #2f54eb"
          @click="() => handleOperate()"
           size="small"
          >新增
        </el-button>
        <el-button
          icon="el-icon-delete"
          @click="() => handleDelete()"
          :disabled="!multipleSelection.length"
          type="danger"
           size="small"
          >删除
        </el-button>
      </div>
      <el-input
        placeholder="请输入关键字"
        v-model="queryParams.name"
        class="input-with-select"
      >
        <el-button
          slot="append"
          icon="el-icon-search"
          type="primary"
          style="background: #2f54eb"
          @click="getList"
        />
      </el-input>
    </div>
    <div class="table">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        @selection-change="handleSelectionChange"
        size="mini"
        v-loading="loading"
      >
        <el-table-column type="selection" width="55" align="center">
        </el-table-column>
        <el-table-column label="序号" width="80" align="center">
          <template slot-scope="scope">
            {{
              (queryParams.pageNum - 1) * queryParams.pageSize +
              (scope.$index + 1)
            }}
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="表单名称"
          width="180"
          align="left"
        >
        </el-table-column>
        <el-table-column prop="code" label="表单标识" align="left">
        </el-table-column>
        <el-table-column prop="erModel" label="ER模型" align="left">
        </el-table-column>
        <el-table-column
          prop="status"
          label="表单状态"
          align="center"
          width="120"
          :formatter="
            (row) => selectDictLabel(dict.type.pt_app_enable_status, row.status)
          "
        >
        </el-table-column>
        <el-table-column
          prop="detectionStatus"
          label="检出状态"
          align="center"
          width="120"
          :formatter="
            (row) =>
              selectDictLabel(
                dict.type.pt_app_form_detection_status,
                row.detectionStatus
              )
          "
        >
        </el-table-column>
        <el-table-column
          prop="detectedBy"
          label="检出人"
          align="center"
          width="120"
        >
        </el-table-column>
        <el-table-column prop="operate" label="操作" align="center">
          <template slot-scope="scope"
            ><div>
              <el-button type="text" @click="() => handleCheck(scope.row)">{{
                scope.row.detectionStatus === "0" ? "检出" : "检入"
              }}</el-button>
              <el-button type="text" @click="() => handleOperate(scope.row)"
                >编辑</el-button
              >
              <el-button type="text" @click="() => handleFormDesign(scope.row)"
                >pc表单设计</el-button
              >
              <el-button type="text" @click="() => handleDelete(scope.row)" style="color:red"
                >删除</el-button
              >
              <el-dropdown
                placement="bottom"
                @command="(value) => generateEr(scope.row, value)"
              >
                <el-button type="text"
                  >更多<i class="el-icon-arrow-down"></i
                ></el-button>
                <el-dropdown-menu
                  slot="dropdown"
                  style="min-width: 100px; text-align: center"
                >
                  <el-dropdown-item command="1">测试</el-dropdown-item>
                  <el-dropdown-item command="2">{{
                    scope.row.status === "0" ? "启用" : "停用"
                  }}</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    <addOrEditModal
      :open="openAddOrEdit"
      :close="openAddOrEditClose"
      v-if="openAddOrEdit"
      :row="row"
      :appId="appId"
    />
    <testModel
      :open="openTest"
      :close="()=>openTest = false"
      v-if="openTest"
      :row="row"
    />
  </div>
</template>

<script>
import addOrEditModal from "./addOrEditModal.vue";
import testModel from "./testModel.vue";
import { getByTableName } from "@/api/app/dataModel/entityModel";
import {
  listAppInfo,
  listAppInfoDelete,
  appFormModelActive,
  appFormModelSuspended,
  appFormModelCheckin,
  appFormModelcheckout,
} from "@/api/app/electronicForms.js";

export default {
  name: "electronicForms",
  components: {
    addOrEditModal,
    testModel,
  },
  dicts: ["pt_app_form_detection_status", "pt_app_enable_status"],
  props: {
    appId: {
      type: String,
      default: "",
    },
     tablePrefix:{
      type: String,
      default: "",
    }
  },
  data() {
    return {
      total: 0,
      queryParams: { name: undefined, pageNum: 1, pageSize: 10 },
      multipleSelection: [],
      openTest:false,
      tableData: [{}],
      row: {},
      open: false,
      loading: false,
      openAddOrEdit: false,
      tableName: undefined,
    };
  },

  mounted() {
    this.getList();
  },

  methods: {
    async generateEr(row, value) {
      if (value === "1") {
        this.row = row
        this.openTest = true
      }
      if (value === "2") {
        const res = await (row.status === "0"
          ? appFormModelActive(row.id)
          : appFormModelSuspended(row.id));
        if (res.code == 200) {
          this.$message.success(row.status === "0" ? "启用成功" : "停用成功");
          this.getList();
        }
      }
    },
    async handleCheck(row) {
      const res = await (row.detectionStatus === "0"
        ? appFormModelcheckout(row.id)
        : appFormModelCheckin(row.id));
      if (res.code == 200) {
        this.$message.success(
          row.detectionStatus === "0" ? "检出成功" : "检入成功"
        );
        this.getList();
      }
    },
    async getList() {
      this.loading = true;
      const res = await listAppInfo({
        ...this.queryParams,
        appId: this.appId,
      });
      if (res.code == 200) {
        this.tableData = res.rows;
        this.total = res.total;
      }
      this.loading = false;
    },
    async handleFormDesign(row) {

      this.row = row;
      // const res = await getByTableName({ tableName: row.formCode });
      // if (res.code == 200) {
      //   this.tableName = res.data?.tableName;
      //   const fieldList = [];
      //   res.data?.formFields?.forEach((item) => {
      //     if (item.hidden !== "YES") {
      //       item.name = item.field;
      //       fieldList.push(item);
      //     }
      //   });
      //   this.fieldList = fieldList;
      // }
       this.$router.push({
        name:'formDesign',
        params:{formCode:this.row?.formCode,erMark:this.row?.erMark,appId:this.appId,row:this.row,tablePrefix:this.tablePrefix}
      })
    },
    openAddOrEditClose() {
      this.openAddOrEdit = false;
      this.getList();
    },
    handleOperate(row) {
      this.row = row;
      this.openAddOrEdit = true;
    },
    handleSelectionChange(arr) {
      this.multipleSelection = arr;
    },
    handleDelete(row) {
      this.$confirm(
        `此操作将永久删除${row ? "该条" : "选中"}数据, 是否继续?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(async () => {
          const ids = [];
          if (!row) {
            this.multipleSelection?.forEach((item) => ids.push(item.id));
          }
          const res = await listAppInfoDelete(!row ? ids.toString() : row.id);
          if (res.code == 200) {
            this.$message.success("删除成功");
            this.getList();
          }
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
.electronicForms {
  .topBtn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    ::v-deep .input-with-select {
      width: 300px;
    }
    ::v-deep .el-icon-search {
      color: #fff;
    }
  }
  .table {
    margin-top: 8px;
  }
  .pagination {
    height: 50px;
  }
}
</style>
